import { useEffect } from 'react';
import { Modal, Form, Input, InputNumber } from 'antd';

interface FormValues {
  name: string;
  code: string;
  boxCount?: number;
  skuTypeCount?: number;
  skuTotalCount?: number;
  remark?: string;
}

interface ShelvesFormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: FormValues) => void;
  initialValues: Partial<FormValues>;
  type: 'add' | 'edit';
}

const ShelvesForm: React.FC<ShelvesFormProps> = ({
  visible,
  onCancel,
  onSubmit,
  initialValues,
  type
}) => {
  const [form] = Form.useForm();
  
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      console.log('表单原始值:', values);
      
      // 确保数值字段是数字类型
      const formattedValues = {
        ...values,
        boxCount: typeof values.boxCount === 'number' ? values.boxCount : Number(values.boxCount || 0),
        skuTypeCount: typeof values.skuTypeCount === 'number' ? values.skuTypeCount : Number(values.skuTypeCount || 0),
        skuTotalCount: typeof values.skuTotalCount === 'number' ? values.skuTotalCount : Number(values.skuTotalCount || 0)
      };
      
      console.log('表单处理后的值:', formattedValues);
      onSubmit(formattedValues);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 当弹窗显示时重置表单
  useEffect(() => {
    if (visible) {
      form.resetFields();
      if (type === 'edit' && initialValues) {
        console.log('编辑模式初始值:', initialValues);
        // 确保数值字段是数字类型
        const formattedValues = {
          ...initialValues,
          boxCount: typeof initialValues.boxCount === 'number' ? initialValues.boxCount : Number(initialValues.boxCount || 0),
          skuTypeCount: typeof initialValues.skuTypeCount === 'number' ? initialValues.skuTypeCount : Number(initialValues.skuTypeCount || 0),
          skuTotalCount: typeof initialValues.skuTotalCount === 'number' ? initialValues.skuTotalCount : Number(initialValues.skuTotalCount || 0)
        };
        form.setFieldsValue(formattedValues);
      } else if (type === 'add') {
        // 新增时设置默认值
        console.log('新增模式设置默认值');
        form.setFieldsValue({
          name: '',
          code: '',
          boxCount: 0,
          skuTypeCount: 0,
          skuTotalCount: 0,
          remark: ''
        });
      }
    }
  }, [visible, initialValues, form, type]);

  return (
    <Modal
      title={type === 'add' ? '新增货架' : '编辑货架'}
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      destroyOnClose
      okText="确定"
      cancelText="取消"
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={initialValues}
      >
        <Form.Item
          name="name"
          label="仓库名称"
          rules={[{ required: true, message: '请输入仓库名称' }]}
        >
          <Input placeholder="请输入仓库名称" />
        </Form.Item>
        
        <Form.Item
          name="code"
          label="货架编号"
          rules={[{ required: true, message: '请输入货架编号' }]}
        >
          <Input placeholder="请输入货架编号" />
        </Form.Item>
        
        <Form.Item
          name="boxCount"
          label="箱子数"
          initialValue={0}
        >
          <InputNumber 
            min={0} 
            style={{ width: '100%' }} 
            precision={0}
            controls={true}
            keyboard={true}
            defaultValue={0}
            onChange={(value) => {
              // 确保值被正确更新到表单
              form.setFieldsValue({ boxCount: value });
            }}
            placeholder="请输入箱子数"
          />
        </Form.Item>
        
        <Form.Item
          name="skuTypeCount"
          label="SKU种类"
          initialValue={0}
        >
          <InputNumber 
            min={0} 
            style={{ width: '100%' }} 
            precision={0}
            controls={true}
            keyboard={true}
            defaultValue={0}
            onChange={(value) => {
              // 确保值被正确更新到表单
              form.setFieldsValue({ skuTypeCount: value });
            }}
            placeholder="请输入SKU种类"
          />
        </Form.Item>
        
        <Form.Item
          name="skuTotalCount"
          label="SKU数量"
          initialValue={0}
        >
          <InputNumber 
            min={0} 
            style={{ width: '100%' }} 
            precision={0}
            controls={true}
            keyboard={true}
            defaultValue={0}
            onChange={(value) => {
              // 确保值被正确更新到表单
              form.setFieldsValue({ skuTotalCount: value });
            }}
            placeholder="请输入SKU数量"
          />
        </Form.Item>
        
        <Form.Item
          name="remark"
          label="备注"
        >
          <Input.TextArea rows={4} placeholder="请输入备注" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ShelvesForm; 